<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript 选项卡</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .wrapper{
            width: 320px;
            height: 118px;
            margin: 300px auto;
            background: white;
        }
        ul{
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
        }
        ul li{
            list-style: none;
        }
        ul li.active{
            border-bottom: 2px solid #ff5000;
        }
        .title{
            width: 100%;
            height: 100%;
            display: none;
            font-size: 13px;
            padding: 0 10px;
        }
        .title.active{
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }
        .title a{
            display: inline-block;
            padding: 0 10px;
            color: #767676;
            text-decoration: none;
            margin-bottom: 10px;
        }
        .title a:hover{
            text-decoration: none;
        }
        .title a.active{
            color: #ff5000!important;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <ul>
        <li class="active">公告</li>
        <li>规则</li>
        <li>论坛</li>
        <li>安全</li>
        <li>公益</li>
    </ul>
    <div class="title active">
        <a href="#" class="active">聚划算产业带计划成功造星 618这百大品牌热销</a>
        <a href="#">天猫618定制礼盒走俏</a>
        <a href="#">百大产业带品牌卖爆了</a>
    </div>
    <div class="title">
        <a href="#">新增《淘宝网汽配行业管理规范》公示通知</a>
        <a href="#">《淘宝网区域零售服务说明》变更公示通知</a>
    </div>
    <div class="title">
        <a href="#" class="active">淘宝1212活动招商</a>
        <a href="#">中差评功能升级</a>
        <a href="#">陌生人拼团上线</a>
        <a href="#">运营神器年终大促</a>
    </div>
    <div class="title">
        <a href="#" class="active">磨豆妈妈公益项目</a>
        <a href="#" class="active">让母亲永不打烊！</a>
        <a href="#">卖家注意：风险通报！</a>
        <a href="#">货假获刑又起诉</a>
    </div>
    <div class="title">
        <a href="#" class="active">淘宝公益平台正式更名</a>
        <a href="#" class="active">益起来商家招募即将截</a>
        <a href="#">卖家如何设置公益宝贝</a>
    </div>
</div>
<script>
    var li1 = document.querySelectorAll(".wrapper ul li");
        title1 = document.querySelectorAll(".title");
    for(var i = 0;i<li1.length;i++){
        li1[i].index = i;
        li1[i].addEventListener("mouseover",function(){
            for(var j = 0;j<li1.length;j++){
                li1[j].classList.remove("active");
                title1[j].classList.remove("active");
            }
            this.classList.add("active");
            title1[this.index].classList.add("active");
        })
    }
</script>
</body>
</html>